<template>
  <div class="layout-wrapper">
    <el-card class="column-left">
      <template #header>
        <div class="card-header">
          <span>服务列表</span>
        </div>
      </template>
      <div class="column-content-left">
        <el-tree
          :data="data"
          :props="defaultProps"
          node-key="layerCode"
          default-expand-all
          backgroundColor="#000"
          @node-click="handleNodeClick"
          ref="treeol"
          @check-change="handleCheckChange"
          style="height: 100%"
        >
          <template #default="{ node, data }">
            <div class="ric">
              <span :class="{ 'text-color-change': node.checked }">{{
                data.label
              }}</span>
            </div>
          </template>
        </el-tree>
      </div>
    </el-card>
    <el-card class="column-right">
      <template #header>
           <el-form
          :model="queryParams"
          ref="queryRef"
          :inline="true"
          label-width="68px"
        >
          <el-form-item prop="userName">
            <el-input
              v-model="queryParams.param1"
              placeholder="参数1"
              clearable
              style="width: 240px"
            />
          </el-form-item>
          <el-form-item prop="phonenumber">
            <el-input
              v-model="queryParams.param2"
              placeholder="参数2"
              clearable
              style="width: 240px"
            />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
      </template>
      <div class="column-content-right">
        <el-card
        class="server-main"
          body-class="server-list"
          v-for="item in serverList"
          :key="item.id"
        >
          <el-row :gutter="20" align="middle">
            <el-col :span="4">
              <img :src="item.img" style="width: 100%" />
            </el-col>
            <el-col :span="18">
              <p>
                服务名称:<el-text class="mx-1" size="large" type="primary">{{
                  item.name
                }}</el-text>
              </p>
              <p>
                数据名称:<el-text class="mx-2" size="large" type="primary">{{
                  item.sourceName
                }}</el-text>
              </p>
              <p>
                服务类型:<el-text class="mx-1" size="large" type="primary">{{
                  item.type
                }}</el-text>
              </p>
            </el-col>
            <el-col :span="2">
              <div class="button-container">
                <el-switch v-model="item.status" />
                <el-button
                  type="primary"
                  style="margin: 120px 0px 0px 0px"
                  @click="toSourceEdit"
                  >在线链接</el-button
                >
              </div>
            </el-col>
          </el-row>
        </el-card>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();

const queryParams = reactive({
  param1: undefined,
  param2: undefined,
});

//左侧树数据
const data = ref([
  {
    label: "默认 one 1",
    children: [
      {
        label: "默认 two 1-1",
        children: [
          {
            label: "默认 three 1-1-1",
          },
        ],
      },
    ],
  },
  {
    label: "默认 one 2",
    children: [
      {
        label: "默认 two 2-1",
        children: [
          {
            label: "默认 three 2-1-1",
          },
        ],
      },
      {
        label: "默认 two 2-2",
        children: [
          {
            label: "默认 three 2-2-1",
          },
        ],
      },
    ],
  },
  {
    label: "默认 one 3",
    children: [
      {
        label: "默认 two 3-1",
        children: [
          {
            label: "默认 three 3-1-1",
          },
        ],
      },
      {
        label: "默认 two 3-2",
        children: [
          {
            label: "默认 three 3-2-1",
          },
        ],
      },
    ],
  },
]);
const defaultProps = {
  children: "children",
  label: "label",
};
// 点击数获取数据
const handleNodeClick = (data) => {};

//服务列表
const serverList = reactive([
  {
    id: 1,
    name: "1",
    status: true,
    type: 1,
    sourceName: "12",
    img: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
  },
   {
    id: 1,
    name: "1",
    status: true,
    type: 1,
    sourceName: "12",
    img: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
  },
  {
    id: 1,
    name: "1",
    status: true,
    type: 1,
    sourceName: "12",
    img: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
  },
  {
    id: 1,
    name: "1",
    status: true,
    type: 1,
    sourceName: "12",
    img: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
  }
]);

const toSourceEdit = (e) => {
  var id = e.id;
  router.push({
    path: "/postmap/onlineEdit",
    query: {
      id: id,
    },
  });
};
</script>

<style lang="scss" scoped>
.layout-wrapper {
  display: flex;
  height: calc(100vh - 84px);
  padding: 15px;
  box-sizing: border-box;
}
.column-left {
  width: 240px;
  height: 100%;
  margin-right: 15px;
}
.column-right {
  flex: 1;
  height: 100%;
//   display: flex;
//   flex-direction: column;
:deep( .el-card__header){
    height: 60px;
}
:deep( .el-card__body){
    height:calc(100% - 60px) ;
}
}
  
.column-content-left,
.column-content-right {
  height: 100%;
  /* 可以添加其他内容样式，如内边距等 */
  overflow: auto;
}
.server-main:nth-of-type(n + 2) {
  margin-top:15px ;
}
.server-list {
  height: 150px;
  padding: 10px !important;
}
.button-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
</style>